<template>
	<div class="chinabox">
		<div  ref="yund" :style="{width:width,height:height}"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts'
export default{
	data(){
		return {
			width:'100%',
			height:'400px',
		}
	},
	computed:{
		data(){
			return this.$store.state.confirm
		}
	},
	watch:{
		data(newData){
			let max = newData[newData.length-1].value;
			let num = 0;
			let showData = newData.map((item)=>{
				if(item.value < 50000){
					num =40000
				}
				return {
					name:item.name,
					value:item.value*1+num
				}
			})
			this.myChart.setOption({
				series:[
					{
						data:showData
					}
				]
			})
		}
	},
	methods:{
		initChart(){
			this.myChart = echarts.init(this.$refs.yund);
			
			let initOption={
				title:{
					text:'▋ 全国省份累计确诊病例',
					textStyle:{
						color:'#fff'
					},
					left:20,
					top:20
				},
				tooltip:{
					formatter(param){
						let num =0;
						if(param.value<20000){
							num=10000;
						}
						return `${param.name}:${param.value-num}例` 
					}
				},
				visualMap:[{
					type:'piecewise',
					show:false,
					pieces:[
						{
							max:40100,
							color:'rgba(0, 255, 204,.2)'
						},
						{ 
							min:40100,
							max:40300,
							color:'rgba(0, 255, 204,.4)'
						},
						{
							min:40300,
							max:40500,
							color:'rgba(0, 255, 204,.6)'
						},
						{
							min:40500,
							max:40700,
							color:'#00FFCC'
						},
						{
							min:40900,
							max:41100,
							color:'#00FF99'
						},
						{
							min:41100,
							max:41300,
							color:'#00FF00'
							
						},
						{
							min:41200,
							max:41500,
							color:'#66FF00'
						},
						{
							min:41500,
							max:41700,
							color:'#99FF00'
						},
						{
							min:41700,
							max:41900,
							color:'#CCFF00'
						},
						{
							min:41900,
							max:42100,
							color:'#FFFF00'
						},
						{
							min:42100,
							max:43000,
							color:'#FFCC00'
						},
						{
							min:43000,
							max:45000,
							color:'#FF9900'
						},
						{
							min:45000,
							max:60000,
							color:'#FF6600'
						},
						{
							min:60000,
							max:80000,
							color:' ##FF3300'
						},
						{
							min:80000,
							color:'#FF0000'
						},
					],
					textStyle:{
						color:'#fff'
					}
				}],
				series:[
					{
						type:'pie',
						name:'shenfen',
						selectedOffset:100,
						roseType:'area',
						minAngle:20,
						radius:[20,'400%'],
						minAngle:20,
						label:{
							show:true,
							position:'inside',
							rotate:true,
							fontSize:8
						},
						labelLine:{
							show:false,
						},
						top:'70%'
					}
				]
			}
			this.myChart.setOption(initOption);
		},
		screenAdapter(){
			// const offsetWidth = this.$refs.yund.offsetWidth /100*3.6;
			// this.myChart.setOption(adapterOption);
			this.myChart.resize({
				animation:{
					duration:300
				}
			})
		}
	},
	mounted() {
		this.initChart();
		window.addEventListener('resize',this.screenAdapter)
	},
	beforeDestroy() {
		window.removeEventListener('resize',this.screenAdapter);
	}
}
</script>

<style scoped="scoped" lang="less">
	.chinabox{
		width: 500px;
	}
	canvas{
		border: 21px solid #000;
	}
</style>
